<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 中心区域 -->
      <a-col :span="24">
        <a-card>
          <div class="mb-20">
            <!-- 查询参数 -->
            <pro-query
              :searchParam="searchParam"
              @on-search ="search"
            ></pro-query>
          </div>
          <div>
            <a-button type="primary" class="mr-20">
              导入
            </a-button>
            <a-button type="primary"  @click="handleAdd">
              新增
            </a-button>
          </div>
          <!-- 列表 -->
          <pro-table
            ref="tableRef"
            :fetch="fetch"
            :columns="columns"
            :operate="operate"
            :param="state.param"
            :data-source="dataSource"
            :pagination="pagination"
            :row-selection="{ selectedRowKeys: state.selectedRowKeys, onChange: onSelectChange }"
          >
          </pro-table>
        </a-card>
      </a-col>
    </a-row>

    <save :visible="state.visibleSave" @close="closeSave"></save>
    <info :visible="state.visibleInfo" @close="closeInfo"></info>
  </page-layout>
</template>

<script>
import { message , modal} from 'ant-design-vue';
import { ExclamationCircleOutlined } from '@ant-design/icons-vue';
import { page, remove } from "@/api/module/teaching-material";
import { reactive, createVNode, ref } from 'vue';
import { useRouter } from 'vue-router'

const removeKey = "remove";

export default {
  setup() {


    const tableRef = ref()

    const router = useRouter()

    const columns = [
      { dataIndex: "tmName", key: "tmName", title: "教材名" },
      { dataIndex: "authorName", key: "authorName", title: "作者名" },
      { dataIndex: "press", key: "press", title: "出版社"},
      { dataIndex: "createBy", key: "createBy", title: "创建人" },
      { dataIndex: "createTime", key: "createTime", title: "创建时间" },
    ];

    /**
     * 查询列表
     * @param param
     * @returns {Promise<{data: *}>}
     */
    const fetch = async (param) => {
      var response = await page(param);
      return {
        data: response.data.record,
      };
    };

    /// 删除配置
    const removeMethod = (record) => {
      modal.confirm({
        title: '您是否确定要删除此配置?',
        icon: createVNode(ExclamationCircleOutlined),
        okText: '确定',
        cancelText: '取消',
        onOk() {
          message.loading({ content: "提交中...", key: removeKey });
          remove({"id":record.id}).then((response) => {
            if(response.success){
              message.success({content: "删除成功", key: removeKey, duration: 1}).then(()=>{
                tableRef.value.reload()
              })
            }else{
              message.error({content: "删除失败", key: removeKey, duration: 1})
            }
          })
        }
      });
    }

    /// 行操作
    const operate = [
      { label: "编辑", event: function ({ id }) { router.push({
          path: '/university/teaching-material/add',
          query: { id: id}
        }) }},
      { label: "删除", event: function (record) { removeMethod(record) }},
    ];

    const handleAdd = () => router.push('/university/teaching-material/add')

    const pagination = false;

    const state = reactive({
      selectedRowKeys: [],
      param: {
      },
      visibleSave: false,
      visibleEdit: false,
      visibleInfo: false,
      recordEdit: {},
      recordInfo: {},
    })

    const searchParam = [
      { key: "teaching-material-name", type: "input", label: "教材名", placeholder: '请输入教材名'},
      { key: "publisher", type: "input", label: "出版社", placeholder: '请输入出版社'},
      { key: "creator", type: "input", label: "创建人", placeholder: '请输入创建人'},
      { key: "creatorTime", type: "rangeTime", label: "创建时间"},
    //   { key: "creatorTime", type: "date", label: "创建时间", placeholder: "TODO", picker:[]},
    ]

    const search = function(value) {
      state.param = value
      tableRef.value.reload()
    }

    const onSelectChange = (selectedRowKeys) => {
      state.selectedRowKeys = selectedRowKeys;
    };

    const closeSave = function() {
      state.visibleSave = false
      tableRef.value.reload()
    }

    const closeEdit = function() {
      state.visibleEdit = false
      tableRef.value.reload()
    }

    const closeInfo = function() {
      state.visibleInfo = false
    }

    return {
      state,
      fetch,
      search,
      columns,
      operate,
      pagination,
      searchParam,
      onSelectChange,

      closeSave,
      closeEdit,
      closeInfo,

      handleAdd,
      tableRef
    };
  },
};
</script>
